<template>
  <div>
    <footer class="footer">
      <ul>
        <li @click="btn(0)">
          <span>
            <svg data-v-617269a8="" viewBox="0 0 40 40" id="msite">
              <g
                data-v-617269a8=""
                fill="none"
                fill-rule="evenodd"
                stroke="#666"
                stroke-width="2"
              >
                <path
                  data-v-617269a8=""
                  d="M31.426 23.095l2.678 5.742 2.943-1.372a3.173 3.173 0 0 0 1.537-4.212l-1.339-2.871-5.819 2.713z"
                ></path>
                <path
                  data-v-617269a8=""
                  d="M29.074 31.161c-1.224-.49-2.404-.32-3.49.185-6.383 2.977-13.938.286-16.875-6.01-2.936-6.297-.14-13.815 6.243-16.792 5.211-2.43 11.203-1.083 14.825 2.919l-12.263 5.718c-1.596.745-2.295 2.624-1.561 4.198.734 1.574 2.625 2.246 4.22 1.503l8.422-3.928 9.953-4.641a18.78 18.78 0 0 0-.941-2.453C33.202 2.416 21.869-1.62 12.294 2.844 2.718 7.309-1.474 18.586 2.93 28.03c4.404 9.445 15.737 13.482 25.313 9.017 1.069-.499 2.067-.879 3.438-1.744 0 0-1.382-3.651-2.607-4.142z"
                ></path>
              </g>
            </svg>
          </span>
          <span> </span>
          <span>外卖</span>
        </li>
        <li @click="btn(1)">
          <span class="searchGray" v-if="!search">
            <svg
              data-v-617269a8=""
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 40 40"
              id="find"
            >
              <g data-v-617269a8="" fill="none" fill-rule="evenodd">
                <use
                  data-v-617269a8=""
                  stroke="#666"
                  stroke-width="4"
                  mask="url(#discover-regular.8ef537f_b)"
                  xlink:href="#discover-regular.8ef537f_a"
                ></use>
                <path
                  data-v-617269a8=""
                  stroke="#666"
                  stroke-width="2"
                  d="M12.79 28.126c-1.515.68-2.169.016-1.462-1.484l3.905-8.284c.47-.999 1.665-2.198 2.66-2.675l8.484-4.064c1.497-.717 2.153-.08 1.46 1.435l-3.953 8.64c-.46 1.006-1.647 2.186-2.655 2.64l-8.44 3.792z"
                ></path>
                <path
                  data-v-617269a8=""
                  fill="#666"
                  d="M15.693 24.636c-.692.276-1.02-.06-.747-.746l2.21-4.946c.225-.505.721-.602 1.122-.202l2.563 2.563c.394.394.31.893-.203 1.122l-4.945 2.209z"
                ></path>
              </g>
            </svg>
          </span>
          <span class="search" v-if="search"
            ><svg
              data-v-617269a8=""
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 40 40"
              id="findActive"
            >
              <g data-v-617269a8="" fill="none" fill-rule="evenodd">
                <use
                  data-v-617269a8=""
                  stroke="#3190e8"
                  stroke-width="4"
                  mask="url(#discover-regular.8ef537f_b)"
                  xlink:href="#discover-regular.8ef537f_a"
                ></use>
                <path
                  data-v-617269a8=""
                  stroke="#3190e8"
                  stroke-width="2"
                  d="M12.79 28.126c-1.515.68-2.169.016-1.462-1.484l3.905-8.284c.47-.999 1.665-2.198 2.66-2.675l8.484-4.064c1.497-.717 2.153-.08 1.46 1.435l-3.953 8.64c-.46 1.006-1.647 2.186-2.655 2.64l-8.44 3.792z"
                ></path>
                <path
                  data-v-617269a8=""
                  fill="#3190e8"
                  d="M15.693 24.636c-.692.276-1.02-.06-.747-.746l2.21-4.946c.225-.505.721-.602 1.122-.202l2.563 2.563c.394.394.31.893-.203 1.122l-4.945 2.209z"
                ></path>
              </g></svg
          ></span>
          <span :class="{ blueColor: search == true }">搜索</span>
        </li>
        <li @click="btn(2)">
          <span>
            <svg data-v-617269a8="" viewBox="0 0 40 40" id="msite">
              <g
                data-v-617269a8=""
                fill="none"
                fill-rule="evenodd"
                stroke="#666"
                stroke-width="2"
              >
                <path
                  data-v-617269a8=""
                  d="M31.426 23.095l2.678 5.742 2.943-1.372a3.173 3.173 0 0 0 1.537-4.212l-1.339-2.871-5.819 2.713z"
                ></path>
                <path
                  data-v-617269a8=""
                  d="M29.074 31.161c-1.224-.49-2.404-.32-3.49.185-6.383 2.977-13.938.286-16.875-6.01-2.936-6.297-.14-13.815 6.243-16.792 5.211-2.43 11.203-1.083 14.825 2.919l-12.263 5.718c-1.596.745-2.295 2.624-1.561 4.198.734 1.574 2.625 2.246 4.22 1.503l8.422-3.928 9.953-4.641a18.78 18.78 0 0 0-.941-2.453C33.202 2.416 21.869-1.62 12.294 2.844 2.718 7.309-1.474 18.586 2.93 28.03c4.404 9.445 15.737 13.482 25.313 9.017 1.069-.499 2.067-.879 3.438-1.744 0 0-1.382-3.651-2.607-4.142z"
                ></path>
              </g>
            </svg>
          </span>
          <span> </span>
          <span>订单</span>
        </li>
        <li @click="btn(3)">
          <span>
            <svg data-v-617269a8="" viewBox="0 0 40 40" id="msite">
              <g
                data-v-617269a8=""
                fill="none"
                fill-rule="evenodd"
                stroke="#666"
                stroke-width="2"
              >
                <path
                  data-v-617269a8=""
                  d="M31.426 23.095l2.678 5.742 2.943-1.372a3.173 3.173 0 0 0 1.537-4.212l-1.339-2.871-5.819 2.713z"
                ></path>
                <path
                  data-v-617269a8=""
                  d="M29.074 31.161c-1.224-.49-2.404-.32-3.49.185-6.383 2.977-13.938.286-16.875-6.01-2.936-6.297-.14-13.815 6.243-16.792 5.211-2.43 11.203-1.083 14.825 2.919l-12.263 5.718c-1.596.745-2.295 2.624-1.561 4.198.734 1.574 2.625 2.246 4.22 1.503l8.422-3.928 9.953-4.641a18.78 18.78 0 0 0-.941-2.453C33.202 2.416 21.869-1.62 12.294 2.844 2.718 7.309-1.474 18.586 2.93 28.03c4.404 9.445 15.737 13.482 25.313 9.017 1.069-.499 2.067-.879 3.438-1.744 0 0-1.382-3.651-2.607-4.142z"
                ></path>
              </g>
            </svg>
          </span>
          <span>我的</span>
        </li>
      </ul>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: false,
    };
  },
  methods: {
    btn(item) {
      if (item == 1) {
        this.search = true;
        this.$router.push({
          path: "/find",
          query: { id: "47.34288,124.029569" },
        });

      }
      if(item==3){
        this.$router.push('Myusername')
      }
    },
  },
};
</script>
<style>
footer {
  border-top: 1px solid #ccc;
}
.blueColor {
  color: rgb(49, 144, 232);
}
.search {
  border: 1px solid rgb(49, 144, 232);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.footer ul li .search svg {
  width: 1.15rem;
  height: 1.15rem;
}
.footer ul li .searchGray svg {
  width: 1.15rem;
  height: 1.15rem;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  background: #fff;
  padding: 0 0.3rem;
}
.footer ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.footer ul li {
  width: 25%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  font-size: 0.45rem;
  color: #666;
}
.footer ul li svg {
  height: 1rem;
  width: 1rem;
}
.searchGray {
  border: 1px solid rgb(102, 102, 102);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
</style>